<template>
	<scroll-view scroll-y="true" class="swiper-scroll">
		<view class="content">
			<view class="recharge">
				<view class="moneybg">
					<view class="money">
						<image src="../../static/image/recharge/vip.png" mode=""></image>
						<span>{{vip_date}}</span>
					</view>
				</view>

				<view class="pay">
					<view class="paytype">
						<view class="paytitle">选择支付方式</view>
						<view class="paylist">
							<view class="uni-list">
								<radio-group @change="radioChange">
									
									<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in paylist" :key="index">
										<view class="left">
											<view class="img">
												<image :src="item.thumb" mode=""></image>
											</view>
											<view class="name">
												<view class="text1">{{item.name}}</view>
												<view class="text2">{{item.remark}}</view>
											</view>
										</view>
										<view>
											<radio :value="item.id + ''"  :checked="item.id == paytype" />
										</view>
									</label>
									
								</radio-group>
							</view>
						</view>
					</view>
					<view class="zaixian">
						<view class="tab-list">
							<text>选择时长</text>
						</view>
						<view class="pay-type">
							<view :class="type == item.id ? 'pay-item gaoliang1' : 'pay-item'" @tap="opentype(item.id)" v-for="(item, index) in list" :key="index">
								<view class="sc">{{item.remark}}</view>
								<view class="name">
									<image src="../../static/image/recharge/vip.png" mode=""></image>
									<span>{{item.name}}</span>
								</view>
								<view class="right">

									<text>¥{{item.coin}}</text>
								</view>
							</view>
						</view>
						<view class="fk" @tap="fk">
							<text>{{payment_page_remark}}</text>
							<!-- <rich-text :nodes="payment_page_remark"></rich-text> -->
						</view>
						<view class="paybtn" @click="pay">去支付</view>
						<view class="geban1">隔板</view>
						<view class="geban1">隔板</view>
						<view class="geban1">隔板</view>
					</view>
				</view>

			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		props: {
			vipdata: {
				default: () => { 
					return {}
				}
			},
		},
		mounted() {
			this.getVipListNew();
		},
		data() {
			return {
				payment_page_remark: '',
				href: '',
				vip_date: '',
				paytype: '',
				type: '',
				paylist: [],
				list: [],
			};
		},
		methods: {
			// 支付
			pay(){
				var that = this;
				uni.showModal({
					title: '提示',
					content: '确定要支付吗？',
					confirmText:'去支付',
					success: function (res) {
						if (res.confirm) {
							var viplistid = that.type;
							var payid = that.paytype;
							var token = '';
							var uid = 0;
							if(uni.getStorageSync('token')){
								token = uni.getStorageSync('token');
								uid = uni.getStorageSync('uid');
							}
							var src = that.href+'?uid='+uid+'&token='+token+'&payid='+payid+'&viplistid='+viplistid;
							// uni.setStorageSync('vipsrc',src);
							uni.setStorageSync('paysrc',src);
							var url = '/pages/recharge/recharge';
							uni.redirectTo({
								url: '/pages/recharge/webview?backtype=1&url=' + url + '&srctype=vipsrc',
							})
						}
					}
				});
				
			},
			// VIP充值列表
			getVipListNew(){
				var token = '';
				var uid = 0;
				if(uni.getStorageSync('token')){
					token = uni.getStorageSync('token');
					uid = uni.getStorageSync('uid');
				}
				this.$api.sendRequest({
					data:{
						service:'Vip.getVipListNew',
						uid:uid,
						token:token,
					},
					success: res => {
						if(res.data.code == 0){
							var param = res.data.info[0];
							this.paylist = param.paylist;
							this.paytype = param.paylist[0].id;
							this.href = param.paylist[0].href;
							
							this.list =  param.paylist[0].vip_config;
							this.type = this.list[0].id;
							this.vip_date = param.user_vip_info.vip_date;
							this.payment_page_remark = param.payment_page_remark;
						}
					}
				});
			},
			opentype(id) {
				this.type = id;
			},
			radioChange(e) {
				var result = this.paylist.filter(function(item) {
				  return item.id == e.detail.value;
				});
				this.list = result[0].vip_config;
				this.paytype = e.detail.value;
				this.type = this.list[0].id;
				this.href = result[0].href;
			},
		}
	};
</script>

<style lang="scss">
	.geban1 {
		height: 88upx;
		color: #ffffff;
	}
	.swiper-scroll {
		height: 100%;
	}
	.recharge{
		width: 100%;
		height: 100%;
		overflow-y: auto;
		.moneybg{
			padding: 84rpx 60rpx;
			background-image: url('@/static/image/recharge/bj.png');
			background-size: 100%;
			.money{
				display: flex;
				align-items: center;
				image{
					width: 80rpx;
					height: 80rpx;
				}
				span{
					margin-left: 10rpx;
					font-size: 32rpx;
					color: #FFFFFF;
				}
			}
		}
		.pay{
			// height: 100vh;
			// overflow-y: auto;
			background-color: #FFFFFF;
			border-radius: 16rpx 16rpx 0 0;
			margin-top: -10rpx;
			.paytype{
				.paytitle{
					color: #3D3D3D;
					font-size: 32rpx;
					padding: 30rpx;
					font-weight: bold;
				}
			}
			.uni-list {
			    background-color: #FFFFFF;
			    position: relative;
			    width: 100%;
			    display: flex;
			    flex-direction: column;
				.uni-list-cell-pd {
				    padding: 11px 15px;
				}
				.uni-list-cell {
				    position: relative;
				    display: flex;
				    flex-direction: row;
				    justify-content: space-between;
				    align-items: center;
					.left{
						display: flex;
						align-items: center;
						justify-content: start;
						.img{
							width: 80rpx;
							height: 80rpx;
							image{
								width: 100%;
								height: 100%;
							}
						}
						.name{
							margin-left: 20rpx;
							.text1{
								font-size: 32rpx;
								color: #3D3D3D;
							}
							.text2{
								font-size: 24rpx;
								color: #999999;
							}
						}
					}
				}
			}
			.zaixian {
				// height: 100vh;
				width: 686rpx;
				// padding-bottom: 50rpx;
				border-radius: 8rpx;
				margin: 32rpx auto;
				
				.fk{
					padding: 20rpx 0;
					color: #666666;
					font-size: 24rpx;
				}
				.paybtn{
					background-image: linear-gradient( 
					      270deg,
					      rgba(244, 185, 107, 1) 0,
					      rgba(249, 222, 141, 1) 100%
					    );
					color: #744A16;
					font-size: 32rpx;
					font-weight: bold;
					text-align: center;
					padding: 30rpx 0;
				}
				.tab-list{
					    color: #3D3D3D;
					    font-size: 16px;
					    padding: 15px 0;
					    font-weight: bold;
				}
				.title {
					text-align: center;
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: rgba(198, 160, 76, 1);
					padding: 28rpx 0;
				}
			
				.pay-type {
					display: flex;
					flex-wrap: wrap;
					box-sizing: border-box;
				}
				.gaoliang1{
					background-image: linear-gradient(
					          180deg,
					          rgba(255, 235, 199, 1) 2.857143%,
					          rgba(245, 224, 188, 1) 100%
					        ) !important;
					  .name{
						  color: #15120D !important;
					  }
					  .right {
						  text:first-child {
						  	color: #744A16 !important;
						  }
						  
						  text:last-child {
						  	color: #A98348 !important;
						  }
					  }
				}
				.pay-item {
					// flex-shrink: :0;
					width: 216rpx;
					height: 216rpx;
					border-radius: 16rpx;
					margin: 0rpx 12rpx 14rpx 0;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					background: #F7F7F7;
					.sc{
						color:#F5D99F ;
						background-color: #454850;
						border-radius: 8rpx;
						padding: 2rpx 8rpx;
						position: relative;
						margin-top: -34rpx;
						top: -26rpx;
						left: -30rpx;
						font-size: 24rpx;
					}
					.name {
						display: flex;
						align-items: center;
						padding-bottom: 10rpx;
						image{
						  width: 50rpx;
						  height: 50rpx;
						}
						span{
							font-size: 36rpx;
							color: #744A16!important;
							font-weight: bold;
						}
					}
			
					.right {
						// width: 220rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: space-between;
						text{
							font-size: 24rpx;
							color: #7B7B7B;
						}
					}
				}
				.gaoliang {
					background: rgba(255, 248, 232, 1) !important;
				}
			}
		}
		
		
	}
	
	/deep/ uni-radio .uni-radio-input-checked {
	  background-color: #44484F !important;
	  border-color: #44484F !important;
	}
</style>